<template>
	<div id = "registeredform">
        <el-form ref="registeredFormRef" :model="registeredForm" :rules="registeredRules" size="large">
            <el-form-item prop="username">
                <el-input v-model="registeredForm.username" placeholder="用户名：admin / user">
                    <template #prefix>
                        <el-icon class="el-input__icon el-icon-user"></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="registeredForm.password" placeholder="密码：123456" show-password autocomplete="new-password">
                    <template #prefix>
                        <el-icon class="el-input__icon el-icon-lock" ></el-icon>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <div class="registered-btn">
            <el-button icon="el-icon-refresh-right" round @click="resetForm()" size="large">重置</el-button>
            <el-button icon="el-icon-check" round @click="registered()" size="large" type="primary" >
                注册
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
		return {
			msg:'',
			registeredForm:{
				username : '',
				password : '',
				ip : '',
				registeredtime:'',
			},
			registeredRules:{
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
			}
		}
	},	
	methods:{
        resetForm(){
            this.registeredForm={
				username : '',
				password : '',
				ip : '',
				registeredtime:'',
			}
        },
        registered(){
            this.$message({showClose: true,message: "暂未完善注册",type: 'error'});
        }
    }
	
}
</script>

<style lang="scss" scoped>
.registered-form {
	width: 420px;
	padding: 50px 40px 45px;
	border-radius: 10px;
	box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
	.registered-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 45px;
		.registered-icon {
			width: 60px;
			height: 52px;
		}
		.logo-text {
			padding: 0 0 0 25px;
			margin: 0;
			font-size: 36px;
			font-weight: bold;
			color: #34495e;
			white-space: nowrap;
			}
		}
		.el-form-item {
		margin-bottom: 40px;
		}
		.registered-btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-top: 40px;
			white-space: nowrap;
			.el-button {
				background: #41b581;
				width: 700px;
			}
		}
	}
</style>